<template>
  <el-card class="form-container" shadow="never">
    <el-form :model="store" :rules="rules" ref="storeFrom" label-width="150px">
      <el-form-item label="详细地址：" prop="addressLat">
        <el-input v-model="store.addressLat"></el-input>
      </el-form-item>
      <el-form-item label="图标：" prop="logo">
        <el-input v-model="store.logo"></el-input>
      </el-form-item>
      <el-form-item label="店铺名称:" prop="name">
        <el-input v-model="store.name"></el-input>
      </el-form-item>
      <!-- <el-form-item label="1为出售中，3为已售罄，-2为仓库中，-1为回收站：" prop="status">
        <el-input v-model="store.status"></el-input>
      </el-form-item>
      <el-form-item label="类型：" prop="type">
        <el-input v-model="store.type"></el-input>
      </el-form-item>-->
      <el-form-item label="联系人：" prop="contactQq">
        <el-input v-model="store.contactQq"></el-input>
      </el-form-item>
      <!-- <el-form-item label="：" prop="addressLng">
        <el-input v-model="store.addressLng"></el-input>
      </el-form-item>
      <el-form-item label="：" prop="lastLoginTime">
        <el-input v-model="store.lastLoginTime"></el-input>
      </el-form-item>-->
      <el-form-item label="支持电话：" prop="supportPhone">
        <el-input v-model="store.supportPhone"></el-input>
      </el-form-item>
      <el-form-item label="店铺纬度" prop="lantitude">
        <el-input v-model="store.lantitude"></el-input>
      </el-form-item>
      <el-form-item label="店铺经度" prop="longtitude">
        <el-input v-model="store.longtitude"></el-input>
      </el-form-item>
      <el-form-item label="城市:" prop="cityName">
        <el-input v-model="store.cityName"></el-input>
      </el-form-item>
      <el-form-item label="区域:" prop="areaName">
        <el-input v-model="store.areaName"></el-input>
      </el-form-item>
      <!-- <el-form-item label="地址区域：" prop="addressArea">
        <el-input v-model="store.addressArea"></el-input>
      </el-form-item>
      <el-form-item label="：" prop="contactQrcode">
        <el-input v-model="store.contactQrcode"></el-input>
      </el-form-item>
      <el-form-item label="描述：" prop="description">
        <el-input v-model="store.description"></el-input>
      </el-form-item>-->
      <el-form-item label="ID:" prop="id">
        <el-input v-model="store.id"></el-input>
      </el-form-item>
      <!-- <el-form-item label="行业1：" prop="industryOne">
        <el-input v-model="store.industryOne"></el-input>
      </el-form-item>
      <el-form-item label="地址城市：" prop="addressCity">
        <el-input v-model="store.addressCity"></el-input>
      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="onSubmit('storeFrom')">提交</el-button>
        <el-button v-if="!isEdit" @click="resetForm('storeFrom')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
import { createStore, getStore, updateStore } from "@/api/sys/store";
import SingleUpload from "@/components/Upload/singleUpload";
import { formatDate } from "@/utils/date";

const defaultStore = {
  name: ""
};

export default {
  name: "StoreDetail",
  components: { SingleUpload },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      store: Object.assign({}, defaultStore),
      rules: {
        name: [
          { required: true, message: "请输入品牌名称", trigger: "blur" },
          {
            min: 2,
            max: 140,
            message: "长度在 2 到 140 个字符",
            trigger: "blur"
          }
        ],
        logo: [{ required: true, message: "请输入品牌logo", trigger: "blur" }],
        sort: [{ type: "number", message: "排序必须为数字" }]
      }
    };
  },
  created() {
    if (this.isEdit) {
      getStore(this.$route.query.id).then(response => {
        this.store = response.data;
      });
    } else {
      this.store = Object.assign({}, defaultStore);
    }
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$confirm("是否提交数据", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            if (this.isEdit) {
              updateStore(this.$route.query.id, this.store).then(response => {
                if (response.code == 200) {
                  this.$refs[formName].resetFields();
                  this.$message({
                    message: "修改成功",
                    type: "success",
                    duration: 1000
                  });
                  this.$router.back();
                } else {
                  this.$message({
                    message: response.msg,
                    type: "error",
                    duration: 1000
                  });
                }
              });
            } else {
              createStore(this.store).then(response => {
                if (response.code == 200) {
                  this.$refs[formName].resetFields();
                  this.store = Object.assign({}, defaultStore);
                  this.$message({
                    message: "提交成功",
                    type: "success",
                    duration: 1000
                  });
                  this.$router.back();
                } else {
                  this.$message({
                    message: response.msg,
                    type: "error",
                    duration: 1000
                  });
                }
              });
            }
          });
        } else {
          this.$message({
            message: "验证失败",
            type: "error",
            duration: 1000
          });
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.store = Object.assign({}, defaultStore);
    }
  }
};
</script>
<style>
</style>


